<template>
  <div class="home">
    <div class="home__views">
      <transition :name="popState">
        <router-view class="home__views--view"></router-view>
      </transition>
    </div>
    <div v-if="footerShow" class="home__footer">
      <com-footer></com-footer>
    </div>
    <div v-if="footerShow" class="common__footer--position" id="footer"></div>
    <loading style="z-index:999;" v-model="isLoading"></loading>

    <!-- 弹出活动 -->
    <x-dialog v-model="isShowPopAd" class="share-Einv" hide-on-blur>
      <div v-html="adHtmlData">
      </div>
    </x-dialog>

    <!-- 红包规则 -->
    <x-dialog v-model="activityShow" class="share-Einv-cj-rule" hide-on-blur>
      <div @click="choseRule()">
        <img style="width: 100%;" :src="ruleImg">
      </div>
    </x-dialog>

    <!-- 抽奖页面 -->
    <x-dialog v-model="luckDrawShow" class="share-Einv-cj" hide-on-blur>
      <div class="luckDraw-back">
        <div class="luckDraw-money">
          <img v-show="!isGetLd" :class="moneyImgClass" src="~assets/activity/money.png">
          <div v-show="isGetLd&&!isNaN(activity.drawRes)" class="luckDraw-money-font">获得{{activity.drawRes}}宝豆</div>
          <div v-show="isGetLd&&isNaN(activity.drawRes)" class="luckDraw-money-font">{{activity.drawRes}}</div>
        </div>
        <div v-show="activity.redMsg==''" class="luckDraw-font">你还有 {{activity.ruleNum}} 次抽奖机会</div>
        <div v-show="activity.redMsg!=''" class="luckDraw-font">{{activity.redMsg}}</div>
        <div v-show="activity.redMsg==''" class="luckDraw-font-rule">{{redAcMsg}}</div>
        <div @click="luckDrawBtn()" v-show="luckDrawBtnShow&&activity.ruleNum!=0&&activity.redMsg!='活动结束,请下次再参与!'&&activity.redMsg!='无抽奖机会啦!'">
          <img class="luckDraw-money-btn" src="~assets/activity/ac_btn.png">
        </div>
      </div>
    </x-dialog>

    <!-- 红包活动 -->
    <div v-show="activity.isShowRed&&activity.isShowRouteRed&&user.isLogin&&(activity.ruleNum != 0 || ruleImg !='')" class="advert_save">
      <div class="advert_acred">
        <img v-show="activity.ruleNum!=0" @click="luckDraw()" class="btn-icon-ld" src="~assets/activity/btn.png">
        <!-- <img v-show="activity.ruleNum!=0" @click="getRule()" class="luckDraw-money-rule" src="~assets/activity/icon-rule.png"> -->
        <img v-show="activity.ruleNum==0" @click="getRule()" class="luckDraw-money-btn-rule" src="~assets/activity/btn-rule.png">
      </div>
    </div>

    <!-- 全屏弹出活动 -->
    <transition name="slide-fade">
      <div v-show="isShowPopAll">
        <div class="home-pop-all" v-html="htmlPopAll">
        </div>
        <!-- <div class="home-pop-all-img" v-show="htmlPopAll==''">
          <img :src="popAllImgUrl">
        </div> -->

        <div>
          <img class="home-pop-all-img" :src="popAllImgUrl">
        </div>
      </div>
    </transition>

    <x-dialog v-model="isShowMsg" class="dialog-Einv dialog-Einv-mi" hide-on-blur>
      <msg></msg>
    </x-dialog>

  </div>
</template>
<script>
import Msg from "src/components/Msg";
import { RequestUrl } from "src/common/url";
import { Loading, TransferDomDirective as TransferDom, XHeader, XDialog } from "vux";
import { FooterIndex, RouteUrl, PopState, Mutations, SaveName, Url_Key, TO_TYPE } from "src/common/const";
import comFooter from "src/components/Footer";
import { mapState } from "vuex";
export default {
  computed: mapState([
    "popState",
    "isLoading",
    "footerShow",
    "region",
    "user",
    "channel",
    "iframe",
    "iframe",
    "initUrl",
    "shareUuid",
    "saveInsure",
    "isInitData",
    "popAd",
    "isInitData",
    "activity",
    "trigger",
    "redTrigger",
    "isShowMsgComData",
    "isWeChar"
  ]),
  components: {
    comFooter,
    Loading,
    XHeader,
    XDialog,
    Msg
  },
  watch: {
    isShowMsgComData(cur, old) {
      if (cur) {
        this.isShowMsg = true;
      } else {
        this.isShowMsg = false;
      }
    },
    // luckDrawShow(cur, old) {
    //   this.$common.storeCommit(this, Mutations.IS_SHOW_RED, this);
    // },
    redTrigger(val, oldVal) {
      // debugger
      if (val) {
        let _this = this;
        setTimeout(() => {
          if (_this.activity.msgState) {
            _this.isGetLd = true;
            _this.luckDrawBtnShow = true;
          } else {
            _this.isGetLd = false;
            _this.luckDrawBtnShow = false;
          }
          _this.moneyImgClass = "luckDraw-money-img";
        }, 500);
      }
    },
    trigger(cur, old) {
      if (cur) {
        this.$common.storeCommit(this, Mutations.IS_SHOW_RED, this);
      }
    },
    isInitData(cur, old) {
      if (cur && this.popAd != false && this.saveInsure.shareUid == "") {
        this.setAd();
      }
    }
  },
  data() {
    return {
      isShowMsg: false,
      fontClass: "luckDraw-font",
      luckDrawBtnShow: true,
      isGetLd: false,
      moneyImgClass: "luckDraw-money-img",
      luckDrawShow: false,
      acAdShow: false,
      activityData: "",
      activityShow: false,
      isShowPopAll: false,
      htmlPopAll: "",
      popAllImgUrl: "",
      adHtmlData: "",
      isShowPopAd: false,
      redAcMsg: "",
      ipRegionInfo: {},
      ruleImg: '',
      initIndexData: {
        TYPE: "FORM",
        type: "hot",
        sorttype: "ASC",
        pageNumber: 1,
        pageSize: 10,
        region: "",
        pointX: "",
        pointY: "",
        userId: "",
        uuid: "",
        userCode: "",
        isShop: false,
      },
      isSetPopAll: true,
      isSetPop: true
    };
  },
  methods: {
    choseRule() {
      this.activityShow = false;
    },
    getRule() {
      this.activityShow = true;
    },
    luckDrawBtn() {
      // debugger
      let _this = this;
      _this.isGetLd = false;
      this.moneyImgClass = "luckDraw-money-img play";
      this.luckDrawBtnShow = false;
      _this.$common.storeCommit(_this, Mutations.ACTIVITY_DRAW, _this);
      // setTimeout(() => {
      //   if (_this.activity.msgState) {
      //     _this.isGetLd = true;
      //     _this.luckDrawBtnShow = true;
      //   } else {
      //     _this.isGetLd = false;
      //     _this.luckDrawBtnShow = false;
      //   }
      //   this.moneyImgClass = "luckDraw-money-img";
      // }, 1500);
    },
    luckDraw() {
      this.isGetLd = false;
      this.luckDrawShow = true;
      this.$common.storeCommit(this, Mutations.IS_SHOW_RED, this);
    },
    closeAd() {
      this.acAdShow = false;
    },
    showActivity() {
      this.activityShow = true;
    },
    setAd() {
      let isSetRed = false;
      let path = this.$route.path;
      let isBaseRoute = false;
      // debugger
      if (path == RouteUrl.INDEX || path == RouteUrl.INSURANCE || path == RouteUrl.SERVICE || path == RouteUrl.MY || path == RouteUrl.SHOP_INDEX || path == "/") {
        isBaseRoute = true;
      }
      for (let i = 0; i < this.popAd.length; i++) {
        let popItem = this.popAd[i];
        if (popItem.toType == TO_TYPE.POP && this.isSetPopAll && isBaseRoute) {
          this.isSetPopAll = false;
          let timeOut = popItem.adType * 1000;
          this.adHtmlData = popItem.detail;
          this.isShowPopAd = true;
          let _this = this;
          setTimeout(() => {
            _this.isShowPopAd = false;
          }, timeOut);
        } else if (popItem.toType == TO_TYPE.POP_ALL && this.isSetPop && isBaseRoute) {
          this.isSetPop = false;
          let adType = popItem.adType;
          let timeOutAll = adType * 1000;
          this.htmlPopAll = popItem.detail;
          this.popAllImgUrl = popItem.img;
          this.isShowPopAll = true;
          let _this = this;
          setTimeout(() => {
            _this.isShowPopAll = false;
          }, timeOutAll);
        } else if (popItem.toType == TO_TYPE.ACTIVITY) {
          this.ruleImg = popItem.img;
          this.redAcMsg = popItem.title;
          // debugger
          isSetRed = true;
        }
      }
      if (isSetRed) {
        this.$common.storeCommit(this, Mutations.IS_SHOW_RED, this);
      }
    },
    goBack() {
      this.$common.goBack(this);
    },
    init() {

    },
    afterEnter(el) {
      this.$vux.loading.hide();
    },
  },
  mounted() {
    if (!this.isInitData) {
      this.$common.storeCommit(this, Mutations.GET_IP_BAIDU_REGION, this);

    }
    //根据授权结果判断是否需要查询并保存渠道账户
    this.$common.storeCommit(this, Mutations.READ_CHANNEL_USER_CODE, this);
    // $.ajax({
    //   type: "GET",
    //   url: RequestUrl.IP_BAIDU_REGION,
    //   data: "",
    //   timeout: 1000,
    //   async: false,
    //   dataType: 'jsonp',
    //   success: function (res, status, xhr) {
    //     let addArray = res.address.split("|");
    //     _this.initIndexData.region = addArray[1];
    //     _this.initIndexData.pointX = res.content.point.x;
    //     _this.initIndexData.pointY = res.content.point.y;
    //     _this.init();
    //   },
    //   error: function (XMLHttpRequest, textStatus, errorThrown) {
    //     _this.initIndexData.region = "重庆";
    //     _this.initIndexData.pointX = "";
    //     _this.initIndexData.pointY = "";
    //     _this.init();
    //   },
    // });
    // debugger


  },
  beforeRouteEnter(to, from, next) {
    next();
  }
};
</script>
<style lang="scss">
.advert_close {
  position: fixed;
}
.advert_acred {
  padding-left: 8px;
  padding-top: 8px;
}
.advert_rule {
  margin-left: 8px;
}
.advert_close_img {
  width: 15px;
}
.home {
  height: 100%;
}
.advert_save-font {
}
// .advert_save {
//   // display: -webkit-inline-box;
//   // padding: 15px;
//   // border-radius: 30px;
//   // background: #C8161D;
//   color: #000;
//   font-size: 15px;
//   font-weight: bold;
//   position: fixed;
//   right: 0;
//   bottom: 15%;
//   vertical-align: middle;
// }
.advert_save {
  // display: -webkit-inline-box;
  // padding: 15px;
  // border-radius: 30px;
  // background: #C8161D;
  color: #000;
  font-size: 15px;
  font-weight: bold;
  position: fixed;
  right: 5%;
  bottom: 15%;
}
.home__footer {
  position: fixed;
  bottom: 0;
  width: 100%; // max-width: 750px;
  height: 53px;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.home-pop-all {
  height: 100%;
  float: inherit;
  z-index: 999;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0px;
}
.home-pop-all-img {
  height: 100%;
  float: inherit;
  z-index: 999;
  width: 100%;
  background-color: #e33b3b;
  position: fixed;
  top: 0px;
}
.home-pop-all-sub {
}
.home__views--view {
  height: 100%;
  width: 100%;
}

.share-Einv-cj-rule {
  .weui-dialog {
    background-color: rgba(0, 0, 0, 0) !important;
    width: 80%;
    border-radius: 4px;
    padding-bottom: 2px;
  }
}

.share-Einv-cj {
  .weui-dialog {
    // max-width: 80%;
    background-color: rgba(0, 0, 0, 0) !important;
    width: 250px;
    border-radius: 4px;
    padding-bottom: 2px;
  }
  // .dialog-title {
  //     line-height: 30px;
  //     color: #666;
  // }
  // .vux-close {
  //     margin-top: 8px;
  //     margin-bottom: 8px;
  // }
}

.home__views {
  // margin-bottom: 53px;
  width: 100%;
  height: 100%;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 300ms;
  height: 100%;
  top: 0;
  position: absolute;
  backface-visibility: hidden;
  perspective: 100; // max-width: 750px;
}

.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.vux-pop-null-leave-active {
  display: none;
}

.luckDraw-back-rule {
  background-color: rgba(0, 0, 0, 0) !important;
  background: url(~assets/activity/pop-rule-all.png);
  min-height: 250px;
  background-size: 100% 100%;
  // background: url(~assets/activity/bg_nodata.png) no-repeat;
  // // background: #cd533d;
  // background: #ffffff url(~assets/activity/bg_nodata.png) no-repeat;
  // margin: 0 auto;
  // margin-bottom: -2px;
}

.luckDraw-back {
  min-height: 250px;
  background-color: rgba(0, 0, 0, 0) !important;
  background: url(~assets/activity/bg_nodata.png);

  background-size: 100% 100%;
  // background: url(~assets/activity/bg_nodata.png) no-repeat;
  // // background: #cd533d;
  // background: #ffffff url(~assets/activity/bg_nodata.png) no-repeat;
  // margin: 0 auto;
  // margin-bottom: -2px;
}
// .luckDraw-topcontent {
//   background: url(~assets/activity/bg_nodata.png) no-repeat;
//   width: 100%;
//   height: 40%;
//   background-size: 100% 100%;
// }
// .luckDraw-topcontent {
//   min-height: 160px;
//   border: 1px solid #d85940;
//   background-color: #d85940;
//   border-radius: 10px 10px 50% 50%/10px 10px 20% 20%;
//   box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.2);
//   margin-bottom: -10px;
// }

// .luckDraw-redpack-open {
//   width: 85px;
//   height: 85px;
//   cursor: pointer;
//   line-height: 85px;
//   border: 1px solid #ebcd9a;
//   background-color: #ebcd9a;
//   border-radius: 50%;
//   color: #303030;
//   font-size: 32px;
//   display: inline-block;
//   margin-top: -50px;
//   box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
// }
.luckDraw-money-img {
  width: 100px;
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 5px;
}

.luckDraw-font {
  color: #fff;
  font-size: 15px;
  margin-top: 10px;
}

.luckDraw-font-top {
  color: #fff;
  font-size: 15px;
  margin-top: 45px;
}

.luckDraw-font-rule {
  color: #fff;
  font-size: 12px;
  width: 180px;
  margin-left: 30px;
}

.luckDraw-money-btn {
  width: 100px;
  margin-top: 10px;
  margin-right: 7px;
}
.btn-icon-ld {
  width: 80px;
}
.play {
  -webkit-animation: palys 1.5s infinite;
}
@-webkit-keyframes palys {
  0% {
    -webkit-transform: rotateY(360deg);
  }

  to {
    -webkit-transform: rotateY(-360deg);
  }
}
.luckDraw-money-font {
  padding-top: 40px;
  padding-bottom: 43px;
  font-size: 19px;
  color: red;
}
// @keyframes palys {
//   0% {
//     -webkit-transform: rotateY(360deg);
//     transform: rotateY(360deg);
//   }

//   to {
//     -webkit-transform: rotateY(-360deg);
//     transform: rotateY(-360deg);
//   }
// }
.luckDraw-money-rule {
  display: flex;
  width: 45px;
  margin-top: -10px;
  margin-left: 22px;
}

.luckDraw-money-btn-rule {
  display: flex;
  width: 80px;
  margin-top: -10px;
  margin-left: 37px;
}
</style>

